<template>
  <div>
    <!-- 搜索框 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.name" placeholder="请输入名称" clearable></el-input>
          <el-input v-model="searchModel.guard_name" placeholder="请输入守卫名称" clearable></el-input>
          <el-button type="primary" @click="getRoleList" round icon="el-icon-search">查询</el-button>
        </el-col>

        <el-col :span="4" align="right">
          <el-button type="success" round @click="openEditUI(null)">新增角色</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 搜索框 -->

    <!-- 表格 -->
    <el-card>
      <el-table :data="roleList" stripe style="width: 100%">
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="guard_name" label="守卫名称">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" round @click="openRoleUI(scope.row.id)">修改权限</el-button>
            <el-button type="primary" @click="openEditUI(scope.row.id)" round>修改</el-button>
            <el-button type="danger" @click="deleteRole(scope.row)" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 表格 -->

    <!-- 修改权限弹窗 -->
    <el-dialog @close="clearForm" title="修改权限" :visible.sync="dialogRoleFormVisible">
      <el-form :model="permissionsForm" ref="permissionsFormRef">
        <el-tree :data="permissionsList" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
          :default-checked-keys="checkedPermissionsList" :props="defaultProps" @check="checkHandler">
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePermissions">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 修改权限弹窗 -->


    <!-- 新增角色弹窗 -->
    <el-dialog @close="clearForm" :title="title" id="addRole" :visible.sync="dialogFormVisible">
      <el-form :model="roleForm" ref="roleFormRef">
        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="roleForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增角色弹窗 -->
  </div>
</template>

<script>
import roleApi from '@/api/role.js'
import permissionsApi from '@/api/permissions.js'

export default {
  name: "roleIndex",
  data() {
    return {
      searchModel: {
        name: '',
        guard_name: '',

        pageNo: 1,//页数
        pageSize: 10,
        pageSizes: [5, 10, 20, 50],
      },

      dialogFormVisible: false,
      dialogRoleFormVisible: false,

      roleList: [],
      total: 0,
      roleForm: {},
      permissionsForm: {},
      title: '',
      formLabelWidth: '120px',

      permissionsList: [],
      checkedPermissionsList: [],

      defaultProps: {
        children: 'children',
        label: 'name'
      },
      questionForm: {},
      savePermissionsRoleId: '',
    }
  },
  methods: {
    //打开修改权限弹窗事件
    openRoleUI(id) {
      this.title = "管理权限";
      this.savePermissionsRoleId = id;
      permissionsApi.getPermissionsList(this.searchModel).then(response => {
        this.permissionsList = response.data.permissionsList;
      })

      roleApi.getPermissionsByRoleId(id).then(response => {
        console.log(id);
        this.checkedPermissionsList = response.data.list;
      })

      this.dialogRoleFormVisible = true;
    },
    //权限单选框点中事件
    checkHandler(...value) {
      console.log(123456);

      console.log(...value);
      let a = value[1].checkedNodes.map((a) => a.name);
      let b = value[1].checkedNodes.map((a) => a.permissionToken);
      console.log(a);
      this.questionForm.description = a;
      this.questionForm.permissionToken = b;
    },
    //修改角色权限事件
    savePermissions() {
      console.log(this.questionForm);
      roleApi.savePermissions(this.savePermissionsRoleId,this.questionForm).then(response => {
        this.$message({
          message: response.message,
          type: 'success'
        });
        this.dialogRoleFormVisible = false
        this.getRoleList();
      })
    },
    saveRole() {
      //触发表单验证
      this.$refs.roleFormRef.validate((valid) => {
        if (valid) {

          roleApi.saveRole(this.roleForm).then(response => {
            this.$message({
              message: response.message,
              type: 'success'
            });
            this.dialogFormVisible = false
            this.getRoleList();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    deleteRole(role) {
      this.$confirm(`此操作将删除 ${role.name}角色, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        roleApi.deleteRole(role.id).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          });
          this.getRoleList();
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    addRole() {
      roleApi.addRole(this.roleForm).then(response => {
        this.dialogFormVisible = false
        this.getRoleList();
      })
    },

    getRoleList() {
      roleApi.getRoleList(this.searchModel).then(response => {
        this.roleList = response.data.rolesList.data;
        this.total = response.data.rolesList.total;
      })
    },



    openEditUI(id) {
      if (id == null) {
        this.title = "新增角色";
      } else {
        this.title = "修改角色";
        //根据id获取角色信息
        roleApi.getRoleById(id).then(response => {
          this.roleForm = response.data.roleInfo;
        })
      }
      this.dialogFormVisible = true;
    },


    clearForm() {
      this.roleForm = {};
    }

  },


  created() {
    this.getRoleList();
  },
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 20px;
}
</style>